<template>
    <div class="container" v-if="pageflag">
        <div class="contents">
            <!-- 综合统计 -->
            <div class="contetn_left">
                <div class="contetn_left_title">博物馆当日数据</div>
                <!--                <LeftTop :child-message="provinceStatData" v-if="provinceStatData"/>-->
<!--                <CenterMap class="contetn_center_top" />-->
                <MuseumsList />
            </div>
            <!-- 地图 -->
            <!--            <div class="contetn_center">-->
            <!--                <CenterMap class="contetn_center_top" />-->
            <!--            </div>-->
            <!-- 排行榜 -->
            <div class="contetn_right">
                <div class="contetn_left-bottom contetn_lr-item" title="年客流数据">
                    <div class="contetn_right_title">年客流数据</div>
                    <!--                    <RightTop class="mrt" :child-message="provinceStatData.rankingData" v-if="provinceStatData" />-->
                    <CenterBottomYear />
                </div>
                <div class="contetn_left-bottom contetn_lr-item" title="月客流数据">
                    <div class="contetn_right_title2">月客流数据</div>
                    <!--                    <RightTop class="mrt" :child-message="provinceStatData.rankingData" v-if="provinceStatData" />-->
                    <CenterBottomMonth :child-message="calendarData" />
                </div>
            </div>
        </div>
        <!-- 日客流数据 -->
        <div class="footer">
            <div class="contetn_center-bottom">
                <div class="contetn_left_title">日客流数据</div>
                <CenterBottom />
            </div>
        </div>
    </div>
    <Reacquire v-else @onclick="getData" line-height="1000px">
        重新获取
    </Reacquire>
</template>

<script>
// import LeftTop from './left-top.vue'
// import CenterMap from "./center-map.vue";
import MuseumsList from "./museumsList.vue";
import CenterBottom from "./center-bottom.vue";
import CenterBottomYear from "./center-bottom-year.vue";
import CenterBottomMonth from "./center-bottom-month.vue";
// import RightTop from "./right-top.vue";
import {currentGET} from "api";
import {Message} from "element-ui";

export default {
    components: {
        // LeftTop,
        // CenterMap,
        // RightTop,
        MuseumsList,
        CenterBottom,
        CenterBottomYear,
        CenterBottomMonth,
    },
    data() {
        return {
            loading: true,
            pageflag: true,
            provinceStatData: null,
            calendarData: [],
        };
    },
    filters: {
        numsFilter(msg) {
            return msg || 0;
        },
    },
    created() {
        window.localStorage.clear()
        let end = setInterval(function () { }, 100);
        for (let i = 1; i <= end; i++) {
            clearInterval(i);
        }
        this.getData();
    },

    mounted() {},
    methods: {
        async getData() {
            this.loading = this.$loading({
                lock: true,
                text: 'Loading',
                spinner: 'el-icon-loading',
                background: 'rgba(0, 0, 0, 0.7)'
            });
            // currentGET("provinceStat", {})
            //     .then((res) => {
            //         if (res.success) {
            //             this.provinceStatData = res.data;
            //         } else {
            //             this.pageflag = false;
            //             this.museumStatData = [];
            //             // this.$Message({
            //             //     text: res.msg,
            //             //     type: "warning",
            //             // });
            //         }
            //     })
            //     .catch((e) => {
            //         this.pageflag = false;
            //         console.log(e, "error");
            //     })
            //     .finally(() => {
            //         this.loading.close();
            //     });


            const currentMonth = this.getCurrentMonth();
            this.getProvCalendarYear(currentMonth);

            this.loading.close();
        },
        // 获取月客流数据
        async getProvCalendarYear(currentMonth) {
            console.log(currentMonth, "currentMonth");
            let query = this.$route.query;
            console.log(currentMonth, "currentMonth");
            console.log(query, "query");
            const res = await currentGET("getCityCalendarYear", {yearMonth: currentMonth, cityId: query.cityId});
            if (res.success) {
                if (res.data.length === 0) {
                    Message({
                        duration: 2000,
                        showClose: true,
                        message: "暂无数据",
                        type: 'warning'
                    });
                }
                this.calendarData = res.data;
                this.calendarData.forEach(item => {
                    item.allocationSum = 1;
                })
                console.log(JSON.parse(JSON.stringify(this.calendarData)), "this.calendarData");
            } else {
                this.pageflag = false;
                this.calendarData = [];
            }
        },
        getProvDay() {
            currentGET("getProvDay", {})
                .then((res) => {
                    if (res.success) {
                        this.ProvDayData = res.data;
                        console.log(this.ProvDayData, 'this.ProvDayData');

                        let hours = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00'];

                        let result = hours.map((hour) => {
                            let obj = this.ProvDayData.find(function(item) {
                                return item.hour === hour;
                            });

                            if (obj) {
                                return obj.value;
                            } else {
                                return 0;
                            }
                        });

                        console.log(result, "result");

                        this.options.series[0].data = result
                        this.options2.series[0].data = result
                    } else {
                        this.pageflag = false;
                        // this.$Message({
                        //     text: res.msg,
                        //     type: "warning",
                        // });
                    }
                })
                .catch((e) => {
                    // this.pageflag = false;
                    console.log(e, "error");
                })
                .finally(() => {
                });
        },
        // 获取当前月份
        getCurrentMonth() {
            const currentDate = new Date(); // 获取当前日期对象
            const year = currentDate.getFullYear(); // 获取当前年份
            const month = currentDate.getMonth() + 1; // 获取当前月份（注意月份从 0 开始，所以要加 1）

            const formattedMonth = `${year}-${String(month).padStart(2, '0')}`; // 格式化月份为 "YYYY-MM"

            return formattedMonth;
        }
    },
};
</script>
<style lang="scss" scoped>
.container {
    display: flex;
    flex-direction: column;
    //justify-content: space-between;
    min-height: calc(100% - 60px);
    //margin-top: 16px;
}

.contetn_left_title {
    width: 446px;
    height: 38px;
    padding-left: 36px;
    line-height: 38px;
    font-size: 18px;
    color: #fcfbff;
    //background-image: url("../../assets/img/left-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/left-title.webp");
    background-size: cover;
    background-position: 25%;
}

.contetn_right_title {
    width: 446px;
    height: 38px;
    padding-right: 36px;
    line-height: 38px;
    font-size: 18px;
    text-align: right;
    color: #fcfbff;
    //background-image: url("../../assets/img/right-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/right-title.webp");
    background-size: cover;
    background-position: 100%;
}

.contetn_right_title2 {
    width: 446px;
    height: 38px;
    margin-top: 10px;
    padding-right: 36px;
    line-height: 38px;
    font-size: 18px;
    text-align: right;
    color: #fcfbff;
    //background-image: url("../../assets/img/right-title.png");
    background-image: url("../../assets/img/bottom3.webp"), url("../../assets/img/right-title.webp");
    background-size: cover;
    background-position: 100%;
}

// 内容
.contents {
    .contetn_left,
    .contetn_right {
        width: 945px;
        box-sizing: border-box;
        // padding: 16px 0;
    }

    .contetn_center {
        flex: 1;
        height: 100%;
        //width: 720px;
    }
    //左右两侧 三个块
    .contetn_lr-item {
        //height: 710px;
    }

    .contetn_center_top {
        width: 100%;
    }

    // 中间
    .contetn_center {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }

    //左边 右边 结构一样
    .contetn_left,
    .contetn_right {
        display: flex;
        flex-direction: column;
        //justify-content: space-around;
        position: relative;
    }

    .contetn_left-bottom {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .mrt{
            margin-right: 12px;
        }
    }
}

.footer{
    .contetn_center-bottom {
        height: 340px;
    }
}


@keyframes rotating {
    0% {
        -webkit-transform: rotate(0) scale(1);
        transform: rotate(0) scale(1);
    }
    50% {
        -webkit-transform: rotate(180deg) scale(1.1);
        transform: rotate(180deg) scale(1.1);
    }
    100% {
        -webkit-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }
}
</style>
